<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#333"
				:title="t('bill.message.title')"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="info mt30">
				<view class="title">{{
					cache.lang == "zh"
						? "您本月信用账单已送到"
						: "Your credit statement for this month has arrived"
				}}</view>
				<view class="date">2019-01-01 10:20:01</view>
				<view class="content">{{
					cache.lang == "zh"
						? "2019年1月信用账单来啦，需还款1999.00元。记得1月10日前还款哦。支持通过余额、储蓄卡快捷进行还款。1月10日前可使用"
						: "The credit bill came in January 2019, and 1999.00 yuan needs to be repaid. Make sure you pay by January 10th. Support quick repayment through balance and debit card. Available until January 10"
				}}</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user, cache } = useStore();
const ui = useUi();
const app = useApp();

const more = () => {
	router.push("/pages/user/callingCard/edit");
};
</script>

<style lang="scss" scoped>
.page-info {
	.info {
		padding: 30rpx;
		background-color: #fff;
		.title {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 34rpx;
			color: #333333;
		}
		.date {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}
		.content {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			margin-top: 20rpx;
		}
	}
}
</style>
